<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>任务九：使用HTML/CSS实现一个复杂页面</title>

	<link rel="stylesheet" type="text/css" href="css/task13.css">
</head>
<body>
<header class="header">
	<img class="logo" src="images/logo-13.png" alt="">
	<div class="right">
		<input type="text" name="">
		<img src="images/person-13.png">
		<button>登录</button>
	</div>
</header>
<div class="content">
	<menu class="menu">
		<div class="selfinfo">
			<div class="icon">
				<img src="images/icon.png" alt="">
				<span>Effall</span>
			</div>
		</div>
		<div class="number">
			<div class="care">
				<span>110</span>
				<span>关注</span>
			</div>
			<hr>
			<div class="fans">
				<span>313</span>
				<span>粉丝</span>
			</div>
		</div>
		<div class="menuview">
			<ul class="menutree level-1">
				<li class="menu-item selected"><a href=""><img src="images/table.png">个人报表</a>
					<ul class="menutree level-2">
						<li><a href=""><img src="images/arrow_right.png" alt=""><img src="images/folder.png" alt="">文件一</a></li>
						<li class="selected"><a href=""><img src="images/arrow_down2.png" alt=""><img src="images/folder.png" alt="">文件二</a>
							<ul class="menutree level-3">
								<li class="selected"><a href=""><img src="images/file.png" alt="">文档一</a></li>
								<li><a href=""><img src="images/file.png" alt="">文档二</a></li>
							</ul>
						</li>
						<li><a href=""><img src="images/arrow_right.png" alt=""><img src="images/folder.png" alt="">文件三</a></li>
					</ul>
				</li>
				<li><a href=""><img src="images/collection.png" alt="">个人收藏</a></li>
				<li><a href=""><img src="images/share.png" alt="">我的分享</a></li>
				<li><a href=""><img src="images/pictureres.png" alt="">图库</a></li>
				<li><a href=""><img src="images/growup.png" alt="">成长记录</a></li>
				<li><a href=""><img src="images/account.png" alt="">账户信息</a></li>
			</ul>
		</div>
	</menu>
	<div class="main-content">
		<div class="breadcrumb">
			<ul>
				<li><a href="">C站</a></li>
				<li><a href="">/ 个人报表</a></li>
				<li><a href="">/ 文件一</a></li>
				<li class="selected"><a href="">/ 文档一</a></li>
			</ul>
		</div>
		<div class="search-condition">
			<form action="">
				<div class="item">
					<label>查询项</label>
					<select name="" id=""><option>第一项</option><option>第二项</option><option>第三项</option></select>
				</div>
				<div class="item">
					<div class="saler">
						<label>买方</label>
						<select name="" id=""><option>小A</option><option>小B</option><option>小C</option></select>
						<br>
						<label class="buyer">卖方</label>
						<select name="" id=""><option>小E</option><option>小F</option><option>小G</option></select>
					</div>
					<input class="exchange" type="button" value="换">
				</div>
				<div class="item">
					<label>日期</label>
					<input class="date" type="date" name=""/>
					<label>总耗时</label>
					<select name="" id=""><option>8天</option><option>12天</option><option>17天</option></select>
					<br>
					<label class="person">人数</label>
					<select name="" id=""><option>8人</option><option>12人</option><option>17人</option></select>
					<label>成交项</label>
					<select class="success" name="" id=""><option>8项</option><option>12项</option><option>17项</option></select>
				</div>
				<input class="search-btn" type="button" value="搜索">
			</form>
		</div>
		<div class="price">
			<button><img src="images/goleft.png"></button>
			<ul>
				<li class="selected">10:00 am <br/><img src="images/yuan.png"> <span>1200</span></li>
				<li>11:00 am <br/><img src="images/yuan.png"> <span>1400</span></li>
				<li>12:00 am <br/><img src="images/yuan.png"> <span>1600</span></li>
				<li>13:00 am <br/><img src="images/yuan.png"> <span>1200</span></li>
				<li>14:00 am <br/><img src="images/yuan.png"> <span>1100</span></li>
				<li>15:00 am <br/><img src="images/yuan.png"> <span>1800</span></li>
			</ul>
			<button><img src="images/goright.png"></button>
			<button class="history"><img src="images/datehistory.png"><span>历史查询</span></button>
		</div>
		<div class="volume">
			<div class="title ">2016年4月份统计</div>
			<div class="item item1 clearfix">
				<div class="number">
					<span class="data">133311</span><br/>
					<span>成交量</span>
				</div>
				<div class="flag"></div>
			</div>
			<div class="item item2">
				<div class="number">
					<span class="data">133311</span><br/>
					<span>成交量</span>
				</div>
				<div class="flag"></div>
			</div>
			<div class="item item3">
				<div class="number">
					<span class="data">133311</span><br/>
					<span>成交量</span>
				</div>
				<div class="flag"></div>
			</div>
			<div class="item item4 clearfix">
				<div class="number">
					<span class="data">133311</span><br/>
					<span>成交量</span>
				</div>
				<div class="flag"></div>
			</div>
		</div>
		<div class="project">
			<div class="left">
				<label class="title">第一组项目</label>
				<ul class="nav nav-tabs clearfix">
					<li class="active"><a href="#">项目一</a></li>
					<li><a href="#">项目二</a></li>
					<li><a href="#">项目三</a></li>
					<li><a href="#">项目四</a></li>
					<li><a href="#">项目五</a></li>
				</ul>
				<div class="table">
					<table>
						<!-- <thead>
							<tr>
								<th>购买材料一</th>
								<th>购买材料一</th>
								<th>购买材料一</th>
								<th>购买材料一</th>
							</tr>
						</thead> -->
						<tbody>
							<tr>
								<td class="selected">购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
							</tr>
							<tr>
								<td>购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
							</tr>
							<tr>
								<td>购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
							</tr>
							<tr>
								<td>购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
							</tr>
							<tr>
								<td>购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
							</tr>
							<tr>
								<td>购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
								<td>购买材料一</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="right">
				<label class="title">第一组项目</label>
			</div>
		</div>
	</div>
</div>	
</body>
</html>